<template>
  <div>
    <el-pagination
        background
        v-if="pageInfo.total !=0"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.pageNo"
        @size-change="sizeChange"
        @current-change="changePage"
      />
    </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { localGet, localSet } from '@/utils'

export default {
  name: 'page',
  props: ['pageInfo'],
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      pageInfo: {
        total: 0, // 总条数
        pageNo: localGet(route.name+'pageNo') || 1, // 当前页
        pageSize: localGet(route.name+'pageSize') || 10, // 分页大小
      }
    })
    const changePage = (val) => {
      state.pageInfo.pageNo = val
      localSet(route.name + 'pageNo', val)
      context.emit("reload", state.pageInfo);
    }
    const sizeChange = (val) => {
      state.pageInfo.pageSize = val
      localSet(route.name + 'pageSize', val)
      context.emit("reload", state.pageInfo);
    }
    return {
      ...toRefs(state),
      changePage,
      sizeChange
    }
  }
}
</script>

<style scoped>
  .avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
  }
  .avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
  }
</style>